<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="week-container">
				<el-row style="height: 100%; width: 100%">
					<el-col :span="24" class="set-col">
						<el-scrollbar class="set-week">
							<div class="text-title">能耗折算系数</div>
							<div class="obversion">
								<el-form label-position="right" label-width="auto">
									<el-row>
										<el-col :span="8" v-for="(item, i) in obversionList" :key="i">
											<el-form-item :label="item.name">
												<el-input-number placeholder="请输入" v-model="item.value" style="width: 250px"></el-input-number>
												<span style="margin-left: 10px">{{ item.unit }}</span>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</div>
							<div class="text-title" style="margin-bottom: 5px">能效标准</div>
							<div>
								<el-button type="primary" @click="addData" style="margin-bottom: 10px">添加</el-button>
							</div>
							<div class="data-list">
								<div>
									<el-form label-position="right" label-width="auto">
										<el-row v-for="(item, i) in copList" :key="i" style="align-items: baseline">
											<el-col :span="6">
												<el-form-item label="COP标准：">
													<el-input placeholder="请输入" v-model="item.copStandard" style="width: 250px"></el-input>
												</el-form-item>
											</el-col>
											<el-col :span="6">
												<el-form-item label="值小于：">
													<el-input-number placeholder="请输入" v-model="item.valueLe" style="width: 250px"></el-input-number>
												</el-form-item>
											</el-col>
											<el-col :span="6">
												<el-form-item label="值大于等于：">
													<el-input-number placeholder="请输入" v-model="item.valueGrEq" style="width: 250px"></el-input-number>
												</el-form-item>
											</el-col>
											<el-col :span="6">
												<el-button type="danger" :icon="Delete" style="margin-left: 10px" @click="delData(item, i)"> 删除</el-button>
											</el-col>
										</el-row>
									</el-form>
								</div>
							</div>
							<div class="text-title" style="margin-bottom: 5px">昼间时间范围</div>
							<div>
								<el-form label-position="right" label-width="auto">
									<el-row>
										<el-col :span="12">
											<el-form-item label="昼间时间：">
												<el-select placeholder="请选择" style="width: 150px" v-model="startTime">
													<template #prefix>
														<el-icon class="small-icon">
															<Clock />
														</el-icon>
													</template>
													<el-option v-for="(item, index) in timeList" :key="index" :label="item.label" :value="item.value"></el-option>
												</el-select>
												<span style="margin: 0 10px">~</span>
												<el-select placeholder="请选择" style="width: 150px" v-model="endTime">
													<template #prefix>
														<el-icon class="small-icon">
															<Clock />
														</el-icon>
													</template>
													<el-option v-for="(item, index) in timeList" :key="index" :label="item.label" :value="item.value"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</div>
							<div class="text-title" style="margin-bottom: 5px">热冷月份配置</div>
							<div>
								<el-form label-position="right" label-width="auto">
									<el-row>
										<el-col :span="24">
											<el-form-item label="供热月份：">
												<el-checkbox-group v-model="hotMonth" style="display: flex; width: 100%">
													<el-checkbox :label="item + '月'" v-for="item in 12" :key="item" size="large" :value="item" />
												</el-checkbox-group>
											</el-form-item>
										</el-col>
										<el-col :span="24">
											<el-form-item label="供冷月份：">
												<el-checkbox-group v-model="coldMonth" style="display: flex; width: 100%">
													<el-checkbox :label="item + '月'" v-for="item in 12" :key="item" size="large" :value="item" />
												</el-checkbox-group>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</div>
						</el-scrollbar>
						<div class="btn-block mb10">
							<el-button type="primary" @click="saveData">保存</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script setup>
import { right } from '@popperjs/core';
import { getParams, updateParmas, delParmas } from '/@/api/consumptionmanagement/basicconfig/params';
import { Delete } from '@element-plus/icons-vue';
import { useMessage } from '/@/hooks/message';

var obj = reactive({});
const timeList = ref([]);
const obversionList = ref([
	{
		name: '电力折标煤系数：',
		value: '0',
		id: 'powerCoal',
		unit: 'kg/kwh',
	},
	{
		name: '电力折碳排系数：',
		value: '0',
		id: 'powerCarbon',
		unit: 'kg/kwh',
	},
	{
		name: '供水折标煤系数：',
		value: '0',
		id: 'waterCoal',
		unit: 'kg',
	},
	{
		name: '供水折碳排系数:',
		value: '0',
		id: 'waterCarbon',
		unit: 'kg',
	},
	{
		name: '天然气折标煤系数：',
		value: '0',
		id: 'gasCoal',
		unit: 'kg/m³',
	},
	{
		name: '天然气折碳排系数：',
		value: '0',
		id: 'gasCarbon',
		unit: 'kg/m³',
	},
	{
		name: '二氧化硫排放系数：',
		value: '0',
		id: 'sulfur',
		unit: '',
	},
	{
		name: '粉尘系数：',
		value: '0',
		id: 'dust',
		unit: '',
	},
	{
		name: '碳排放等效指数：',
		value: '0',
		id: 'carbonEmission',
		unit: '',
	},
]);
const copList = ref([
	{
		id: '0',
		copStandard: '',
		valueLe: '',
		valueGrEq: '',
	},
]);
const startTime = ref('');
const endTime = ref('');
const hotMonth = ref([]);
const coldMonth = ref([]);
const addData = () => {
	copList.value.push({
		id: '0',
		copStandard: '',
		valueLe: '',
		valueGrEq: '',
	});
};
const delData = (item, i) => {
	copList.value.splice(i, 1);
};

const saveData = () => {
	obversionList.value.forEach((item) => {
		obj[item.id] = item.value;
	});
	obj.diurnalStartTime = startTime.value;
	obj.diurnalEndTime = endTime.value;
	obj.standardList = copList.value;
	obj.hotMonth = hotMonth.value.join(',');
	obj.coldMonth = coldMonth.value.join(',');
	updateParmas(obj).then((res) => {
		if (res) {
			useMessage().success('保存成功');
			getData();
		}
	});
};
const getTimeList = () => {
	let arr = [];
	for (let i = 0; i < 24; i++) {
		let a = i < 10 ? '0' + i : '' + i;
		// let b = '00';
		arr.push({
			label: a, // + ':' + b,
			value: a, //+ b,
		});
	}
	return arr;
};
const getData = () => {
	getParams().then((res) => {
		if (res) {
			obj = res.data;
			obj.id = res.data.id;
			obj.standardId = res.data.standardId;
			obversionList.value.forEach((item) => {
				item.value = obj[item.id];
			});
			startTime.value = obj.diurnalStartTime;
			endTime.value = obj.diurnalEndTime;
			copList.value = obj.standardList;
			hotMonth.value = obj.hotMonth.split(',')?.map((item) => parseInt(item));
			coldMonth.value = obj.coldMonth.split(',')?.map((item) => parseInt(item));
		}
	});
};
onMounted(() => {
	timeList.value = getTimeList();
	getData();
});
</script>
<style lang="scss" scoped>
:deep(.el-checkbox) {
	display: flex;
	flex-direction: column !important;
	.el-checkbox__label {
		padding-left: 0px !important;
		padding-top: 8px !important;
	}
}
.execution {
	height: 100%;
}
.week-container {
	padding: 8px 20px;
	border-radius: 10px;
	box-sizing: border-box;
	background: #fff;
	height: 100%;
	margin: 0 10px;
}
.set-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.text-title {
	position: relative;
	height: 36px;
	line-height: 36px;
	padding-left: 10px;
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin-bottom: 10px;
	&:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 16px;
		background-color: #409eff;
		top: 10px;
		left: 0;
	}
}
.set-week {
	height: calc(100% - 36px);
	padding-right: 10px;
}
.btn-block {
	text-align: center;
	height: 36px;
	line-height: 36px;
}
.obversion {
	.week {
		display: flex;
		width: 100%;
		height: 50px;
		align-items: center;
		justify-content: space-around;
		.policy {
			span {
				margin-right: 20px;
			}
		}
		&:not(:last-child) {
			border-bottom: 1px solid #ddd;
		}
	}
}
.data-list {
	.sp-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.sp-text {
			display: flex;
			align-items: center;
			span {
				margin-right: 10px;
			}
			.el-input {
				width: 200px;
			}
		}
		&:not(:last-child) {
			margin-bottom: 10px;
		}
	}
}
</style>
